<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="../img/icon.ico" rel="shortcut icon" />
    <link rel="stylesheet" href="../layui/css/layui.css" />
    <link rel="stylesheet" href="../css/element.min.css?1" />
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2315128_5bb2ydgeqs.css">
    <link rel="stylesheet" href="../css/reset.css?3123">
    <link rel="stylesheet" href="../css/setlayui.css?12">
    <link rel="stylesheet" href="../css/viewer.min.css">
    <script src="../layui/layui.all.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/vue.min.js"></script>
    <script type="text/javascript" src="../js/element.min.js"></script>
    <script src="../js/viewer.min.js"></script>
</head>

<body>
    <div id="app" class="page-container" style="display: none;" v-show="showApp">
        <div class="contetn_box">
            <div class="cell_box">
                <div class="cell_name must_input">材料名称</div>
                <div class="cell_cont">
                    <el-tooltip class="item" effect="dark" :disabled="!materialName" :content="materialName"
                        placement="top">
                        <el-input class="public_input" disabled placeholder="请输入内容" v-model="materialName" clearable>
                        </el-input>
                    </el-tooltip>
                </div>
            </div>
            <div class="cell_box">
                <div class="cell_name must_input">单位</div>
                <div class="cell_cont">
                    <el-tooltip class="item" effect="dark" :disabled="!unit" :content="unit" placement="top">
                        <el-input class="public_input" disabled placeholder="请输入内容" v-model="unit" clearable>
                        </el-input>
                    </el-tooltip>
                </div>
            </div>
            <div class="cell_box">
                <div class="cell_name must_input">材料规格</div>
                <div class="cell_cont">
                    <div class="cont_item" v-for="(item, index) in ggList" :key="index">
                        <el-tooltip class="item" effect="dark" :disabled="!item.specificationName"
                            :content="item.specificationName" placement="top">
                            <el-input class="public_input" placeholder="请输入内容" v-model="item.specificationName"
                                clearable> </el-input>
                        </el-tooltip>
                        <div class="input_but" style="margin-left: 10px;">
                            <el-button @click="removeImg(ggList, index, 1)" v-if="index > 0" class="border_but"
                                type="primary">删除</el-button>
                            <el-button @click="addcl" v-if="index == ggList.length - 1" class="border_but"
                                type="primary">增加</el-button>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="but_box" style="margin-top: 10px;">
            <el-button @click="cancels" class="cancelClass">取消</el-button>
            <el-button @click="confirms" type="primary" style="margin-left: 120px">提交</el-button>
        </div>
    </div>
    <script src="../js/public.js?1234"></script>
    <script>
        var layer = layui.layer
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    showApp: false,
                    materialName: '',
                    unit: '',
                    infoObj: {},
                    recid: '',
                    ggList: [
                        {
                            specificationName: ''
                        }
                    ]
                };
            },
            methods: {
                cancels() {
                    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                    parent.layer.close(index);
                },
                addcl() {
                    for (var i = 0; i < this.ggList.length; i++) {
                        if (!this.ggList[i].specificationName) {
                            this.$message({
                                message: '请输入规格后再新增',
                                type: 'warning',
                                duration: 1000
                            });
                            return false
                        }
                    }
                    this.ggList.push({
                        specificationName: ''
                    })
                },
                removeImg(arr, index, types) {
                    var title = '此操作将永久删除该文件, 是否继续?'
                    if (types == 1) {
                        title = '此操作将永久删除该数据, 是否继续?'
                    }
                    this.$confirm(title, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(function () {
                        arr.splice(index, 1)
                    }).catch(function () {
                    });
                },
                confirms() {
                    var that = this
                    var arr = [];
                    for (var i = 0; i < this.ggList.length; i++) {
                        if (!this.ggList[i].specificationName) {
                            this.$message({
                                message: '请输入规格',
                                type: 'warning',
                                duration: 1000
                            });
                            return false
                        }
                        arr.push(this.ggList[i].specificationName)
                    }
                    if (new Set(arr).size !== arr.length) {
                        this.$message({
                            message: '不能添加相同规格型号！',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }
                    var specsDatas = []
                    for (var i = 0; i < that.ggList.length; i++) {
                        if (that.ggList[i].specificationName) {
                            specsDatas.push({
                                specificationName: that.ggList[i].specificationName
                            })
                        }
                    }
                    xLoading(true, '正在提交')
                    $.ajax({
                        type: 'post',
                        headers: {
                        },
                        url: baseUrl + '/Material/AddSpecifications',
                        data: {
                            materialId: that.recid,
                            specsDatas: JSON.stringify(specsDatas)
                        },
                        dataType: 'json',
                        success: function (res) {
                            xLoading(false)
                            if (!res.success) {
                                that.$message({
                                    message: res.msg ? res.msg : '程序错误，请重试',
                                    type: 'error'
                                });
                                return false;
                            }
                            that.$message({
                                message: '已提交',
                                type: 'success'
                            });
                            setTimeout(function () {
                                var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                                parent.layer.close(index);
                            }, 500)
                        }
                    });
                }
            },
            mounted() {
                this.showApp = true;
                this.infoObj = JSON.parse(decodeURIComponent(getQuerys('objs')))
                this.materialName = this.infoObj.names
                this.unit = this.infoObj.unit
                this.recid = this.infoObj.recid
            }
        });
    </script>
</body>
<style>
    .page-container {
        padding: 10px;
        padding-bottom: 0;
    }

    .contetn_box {
        height: calc(100% - 80px);
        overflow: auto;
    }

    .cell_box {
        width: 80%;
        margin-left: 10%;
        display: flex;
        margin-bottom: 20px;
    }

    .cell_name {
        width: 76px;
        text-align: right;
        line-height: 32px;
        padding-right: 10px;
    }

    .cont_item {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
    }

    .input_but {
        display: flex;
    }

    .cell_cont {
        width: calc(100% - 76px);
    }

    .public_input {
        width: 100% !important;
    }

    .el-input.is-disabled .el-input__inner {
        color: #333;
    }
</style>

</html>